import {ImageBackground, Pressable, StyleSheet, Text, TouchableOpacity, View,Image} from "react-native";
import React, {useEffect} from "react";
import {useRouter} from "expo-router";
import {Colors} from "@/constants/Colors";
import Animated, {FadeIn, FadeInDown, FadeInRight} from "react-native-reanimated";
import {StatusBar} from "expo-status-bar";
import {getLogin} from "@/api/login";
import {useTranslation} from "react-i18next";
import { useSelector } from 'react-redux';
import useGetStorage from "@/hooks/useGetStorage";

const Page = () => {
  const router = useRouter();
  const { i18n,t } = useTranslation();


  // useEffect(() => {
  //
  //   getTestData()
  // }, []);

  // const getTestData = async () => {
  //   let data = {
  //     dd: 3
  //   }
  //   getLogin(data)
  //       .then(res => {
  //         console.log(res,'----');
  //       })
  //       .catch(error => {
  //         console.log(error,'---0000');
  //       });
  // }

  // const isLogin = useSelector(state => state.login);
  // useEffect(() => {
  //   console.log(isLogin,'login');

  // }, [isLogin]);


      // setTimeout(() => {
      //   router.replace('/(tabs)')

      //
      // }, 3000)

  // setTimeout(() => {
  //   router.replace('/(tabs)')
  // }, 3000)

  useEffect(() => {
    const timer = setTimeout(() => {
      useGetStorage('token').then(res => {
        if (res) {
          router.replace('/(tabs)')
        } else {
          router.replace("/login")
        }
      })
    }, 3000);
    return () => clearTimeout(timer);
  }, []);

  return (
      <View style={styles.container}>
        <StatusBar style='light'></StatusBar>
        <ImageBackground
            source={require('@/assets/images/login_bg.jpg')}
            style={{flex: 1,width:'100%',height:'100%'}}
            resizeMode='cover'
        >
          <View style={styles.wrapper}>
            {/*<Animated.Text style={styles.title} entering={FadeInRight.delay(300).duration(500)}>Stay Updated!</Animated.Text>*/}
            {/*<Animated.Text style={styles.description} entering={FadeInRight.delay(700).duration(500).duration(700)}>Get breaking news and personalized updates directly to your feed.</Animated.Text>*/}
            {/*<Animated.View style={styles.btn} entering={FadeInDown.delay(1200).duration(500)}>*/}
            {/*  <Pressable onPress={() => router.replace("/login")}>*/}
            {/*    <Text style={styles.btnText}>Get Started--{t("language")}</Text>*/}
            {/*  </Pressable>*/}
            {/*</Animated.View>*/}
            <View style={styles.logo_wrap}>
              <Image style={styles.logo} source={require('@/assets/images/logo2.png')} resizeMode={'contain'}></Image>
              <Image style={styles.zlxAI} source={require('@/assets/images/zlxAI.png')} resizeMode={'contain'}></Image>
            </View>
            <Image style={styles.hint} source={require('@/assets/images/app_hint.png')} resizeMode={'contain'}></Image>
          </View>
        </ImageBackground>

      </View>
  );
};

export default Page;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // justifyContent: "center",
    // alignItems: "center",
  },
  wrapper: {
    flex: 1,
    // justifyContent: 'flex-end',
    // paddingBottom: 50,
    // paddingHorizontal: 30,
    // gap: 10,
    // backgroundColor: 'rgba(0,0,0,0.5)'
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  logo_wrap: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 80,
    width: '100%',
    height: 124
  },
  logo: {
    width: 98,
    height: 98,
  },
  zlxAI: {
    width: 98,
    height: 26,
    marginTop: 8,
  },
  hint: {
    width:147,
    height: 36,
    position: 'absolute',
    bottom: 56,
    left: '50%',
    marginLeft: -73.5,
  },
  title: {
    color: Colors.white,
    fontSize: 24,
    fontWeight: '600',
    letterSpacing: 1.5,
    lineHeight: 36,
    textAlign: "center"
  },
  description: {
    color: Colors.white,
    fontSize: 16,
    fontWeight: '500',
    letterSpacing: 1.2,
    lineHeight: 22,
    textAlign: "center"
  },
  btn: {
    backgroundColor: Colors.tint,
    paddingVertical: 15,
    marginVertical: 20,
    alignItems: 'center',
    borderRadius: 10
  },
  btnText: {
    color: Colors.white,
    fontSize: 16,
    fontWeight: '700'
  }
});
